<template>
  <div class="state-recent-charts">
    <el-row>
      <el-col :span="12">
        <ve-line
          :data="chartData"
          :settings="chartSettings"
          v-loading="loading"
        />
      </el-col>
      <el-col :span="12">
        <ve-bar
          :data="chartData"
          :settings="barSettings"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sysStateMixins from '@/mixins/sys-state/sys-state.mixins'
import moment from 'moment'
export default {
  name: 'StateRecentCharts',
  mixins: [sysStateMixins],
  props: {
    type: {
      type: String,
      default: 'today'
    },

    ip: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      chartData: {
        // 'CPU',
        columns: ['time', 'cpu', 'memory', 'disk'],
        rows: []
      },
      barSettings: {
        xAxisType: ['percent', 'percent', 'percent'],
        xAxisName: ['CPU', '内存', '硬盘'],
        dataOrder: {
          order: 'desc'
        },
        labelMap: {
          cpu: 'CPU',
          memory: '内存',
          disk: '硬盘'
        }
      },
      // 折线图
      chartSettings: {
        area: true,
        yAxisType: ['percent'],
        yAxisName: ['比例'],
        min: [0],
        max: [1],
        labelMap: {
          cpu: 'CPU',
          memory: '内存',
          disk: '硬盘'
        }
      }
    }
  },
  watch: {
    ip: {
      handler: function (newValue, oldValue) {
        this.dataForm.ip = newValue
        this.reloadData()
      }
    },
    type: {
      handler: function (newValue, oldValue) {
        this.reloadData()
      }
    }
  },
  beforeMount () {
    // hours
    // this.dataForm.startDate = new-old-user Date()
    // this.dataForm.endDate = new-old-user Date()

  },
  mounted () {
    //
    this.reloadData()
  },
  methods: {

    changeParams () {
      if (this.type === 'today') {
        // today
        this.dataForm.limit = 100
        let timeValues = this.todayFormat()

        this.dataForm = {
          ...this.dataForm,
          ...timeValues
        }
      }
      if (this.type === 'week') {
        this.dataForm.limit = 100
        let timeValues = this.sevenDaysFormat()

        this.dataForm = {
          ...this.dataForm,
          ...timeValues
        }
      }
    },
    reloadData () {
      this.changeParams()
      Promise.all([this.loadMemories(), this.loadDisks(), this.loadCpu()]).then(
        () => {
          if (this.type === 'today') {
            this.handleTodayData()
          }
          if (this.type === 'week') {
            this.handleWeekData()
          }
        }
      )
    },
    handleWeekData () {
      this.chartData.rows = Array.from(Array(7).keys()).map(i => {
        let time = new Date(new Date().getTime() - 24 * 60 * 60 * i * 1000)
        let day = moment(time).format('YYYY-MM-DD')

        let timestamp = `${day} 00:00:00`

        let memory = this.memories.find(item => {
          return item.timestamp === timestamp
        })
        let disk = this.disks.find(item => {
          return item.timestamp === timestamp
        })
        let cpu = this.cpus.find(item => {
          return item.timestamp === timestamp
        })

        // API and CPU

        let model = {
          time: day,
          memory: memory ? memory.actualUsedPct : 0,
          disk: disk ? disk.usedPct : 0,
          cpu: cpu ? cpu.systemCpuTotalNormPct : 0
        }

        return model
      })
    },
    handleTodayData () {
      let hours = new Date().getHours()
      this.chartData.rows = Array.from(Array(hours + 1).keys()).map(i => {
        let today = moment(new Date()).format('YYYY-MM-DD')
        let timestamp = `${today} ${i >= 10 ? i : '0' + i}:00:00`

        let memory = this.memories.find(item => {
          return item.timestamp === timestamp
        })
        let disk = this.disks.find(item => {
          return item.timestamp === timestamp
        })
        let cpu = this.cpus.find(item => {
          return item.timestamp === timestamp
        })

        // API and CPU

        let model = {
          time: `${i >= 10 ? i : '0' + i}时`,
          memory: memory ? memory.actualUsedPct : 0,
          disk: disk ? disk.usedPct : 0,
          cpu: cpu ? cpu.systemCpuTotalNormPct : 0
        }

        return model
      })
    }
  }
}
</script>

<style scoped lang="scss">
.state-recent-charts {
}
</style>
